<!DOCTYPE html>
<html lang="en" data-ng-app="App">

<head>
    <meta charset="UTF-8">
    <title>云图轨道交通数据管理系统-账号申请</title>
    <link rel="stylesheet" href="/StyleSheets/font-awesome.css">
    <link rel="stylesheet" href="/StyleSheets/authentication/style.css">
</head>


<body data-ng-controller="homeCtrl">
    <div id="register-container">
        <div id="sgidi">
            账号注册
        </div>
        <div class="divider"></div>
        <div class="form-wrapper">
            <form action="/register1" method="post" enctype="application/x-www-form-urlencoded">
                <div class="input-section">
                    <label for="username">
                        用户名 <i class="fa fa-user"></i>
                    </label>
                    <input type="text" data-ng-model="userName" name="username" required placeholder="用户名" data-ng-change="userNameChange(angular.element(this))">
                    <span data-ng-show="userNameOccupied!==null">
                        <i title="{{userNameOccupied?'用户名被占用':'用户名可以使用'}}" class="fa" data-ng-class="{'fa-check':userNameOccupied===false,'fa-times':userNameOccupied===true}"></i>
                    </span>
                </div>
                <div class="input-section">
                    <label for="password">
                        密码 <i class="fa fa-lock"></i>
                    </label>
                    <input type="password" name="password" data-ng-model="password1" required placeholder="输入你的密码">

                </div>
                <div class="input-section">
                    <label for="password2">
                        再输一次 <i class="fa fa-lock"></i>
                    </label>
                    <input type="password" name="password2" data-ng-change="passwordChange()" data-ng-model="password2" required placeholder="再次输入你的密码">
                    <span data-ng-show="passwordEqual!==null">
                        <i title="密码不一致" class="fa" data-ng-class="{'fa-times':passwordEqual===false}"></i>
                    </span>

                </div>
                <div class="input-section">
                    <label for="username">
                        &nbsp;
                    </label>
                    <input type="submit" class="submit-btn next" value="继续" data-ng-click="submit($event)">
                    <a href="/login" class="link-btn">登录已有账号</a>
                </div>
            </form>
        </div>
    </div>
    <footer>©2014-2015 上海岩土工程勘察设计研究院有限公司-地理信息所版权所有</footer>
</body>
<script src="http://cdn.staticfile.org/angular.js/1.3.0-beta.13/angular.min.js"></script>
<script>
var app = angular.module('App', []);
app.controller('homeCtrl', ['$scope', '$timeout', '$http', function($scope, $timeout, $http) {

    $scope.userNameChange = function(ele) {
        delayedFn(queryIsUserNameOccupied);
    };
    $scope.passwordChange = function() {
        delayedFn(checkPasswordEqual);
    };

    //名字是否被占用
    $scope.userNameOccupied = null;
    //密码是否一直
    $scope.passwordEqual = null;
    var timerPromise = null;

    function queryIsUserNameOccupied() {
        console.log('向服务器询问:', $scope.userName, '是否被占用!');
        //向服务器询问,用户名是否被占用?
        var result = Math.floor(Math.random() * 10);
        $scope.userNameOccupied = result % 2 === 0;
    }

    function checkPasswordEqual() {
        if ($scope.password1 === $scope.password2) {
            $scope.passwordEqual = true;
        } else {
            $scope.passwordEqual = false;
        }
    }

    function delayedFn(fn) {
        timerPromise && $timeout.cancel(timerPromise);
        timerPromise = $timeout(fn, 800);
    }

    $scope.submit = function(event) {

        if ($scope.userNameOccupied === false && $scope.passwordEqual) {
            // $http({
            //     method: 'post',
            //     url: '/register1',
            //     data: {
            //         username: $scope.userName,
            //         password: $scope.password1
            //     }
            // }).success(function(data) {

            // });
        } else {
            event.preventDefault();
            alert('请检查你的输入.');

        }
    }

}]);
</script>

</html>
